<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HATC  - Trang chủ</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1"/>
        <meta name="viewport" content="width=device-width"/>
        <!-- Css Files Start -->
        <link href="<?php echo base_url(); ?>front_end/css/style.css" rel="stylesheet" type="text/css" />
        <!-- All css -->
        <link href="<?php echo base_url(); ?>front_end/css/bootstrap.css" rel="stylesheet" type="text/css" />    

        <!-- JS Files Start --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>back_end/js/jquery.js"></script><!-- lib Js -->         
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/modernizr.js"></script><!-- Modernizr --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/easing.js"></script><!-- Easing js --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/bootstrap.js"></script><!-- Bootstrap --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/bxslider.js"></script><!-- BX Slider --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/isotope.js"></script><!-- ISoTope Sorting Filter --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/grayscale.js"></script><!-- GreyScale --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/clearInput.js"></script><!-- Input Clear --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/prettyPhoto.js"></script><!-- Pretty Photo --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/social.js"></script><!-- Social Media Hover Effect --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/metro-lj.js"></script> <!-- MouseWheel --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/nicescroll.js"></script> <!-- jquery nice scroll --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/scrollin.js"></script> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/jquery.smartTab.js"></script><!-- Time Line / Functions --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/jquery.validate.min.js"></script><!-- Custom / Functions --> 
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/jquery_pie_chart.js"></script>
        <script type="text/javascript" src="<?php echo base_url(); ?>front_end/js/custom.js"></script><!-- Custom / Functions --> 
    </head>
    <body>
        <!-- Start Main Wrapper -->
        <div id="wrapper"> 
            <div id="header-wrapper">
                <?php $this->load->view('template/header'); ?>
            </div>            
            <div id="content-wrapper" class="mbtm2">
                <?php $this->load->view($content); ?>
            </div>            
            <div id="footer-wrapper">
                <?php $this->load->view('template/footer'); ?>
            </div>
        </div>

        <!-- End of Wrapper --> 




        <script type="text/css">
            jQuery(document).ready(function() {
            "use strict";
            var countElements = $(".scroll-box .grid .gr-box").size();
            $(".scroll-box .grid").width(countElements*100);

            var scrollbox = $(".scroll-box");
            var indent = ( $(window).width() - $(".fifteen.columns>.wrap").width() ) / 2;

            setBoxedSlider();

            var animateTime = 1,
            offsetStep = 5;

            scrollWrapper = $('.scroll-box');
            scrollContent = $('.scroll-box .grid');

            //event handling for buttons "left", "right"
            $('.bttL').mousedown(function() {
            scrollContent.data('loop', true).loopingAnimation($(this), $(this).is('.bttR') );
            }).bind("mouseup mouseout", function(){
            //scrollContent.data('loop', false).stop();
            });
            $.fn.loopingAnimation = function(el, dir){
            if(this.data('loop')){
            var sign = (dir) ? '-=' : '+=';
            this.animate({ marginLeft: sign + offsetStep + 'px' }, animateTime, function(){ $(this).loopingAnimation(el,dir) });
            }
            return false;
            };
            //jQuery('.scroll-box').tinyscrollbar({ axis: 'x'});

            });

            jQuery(window).resize(function(){
            "use strict";
            setBoxedSlider();
            setBoxedSlider();
            });
            function setBoxedSlider(){
            "use strict";
            scrollbox = jQuery(".scroll-box");

            if(scrollbox.data("boxed") == "3"){
            var marginLeft = jQuery('.fifteen.columns').width();
            marginLeft = (jQuery(window).width() - marginLeft)/2 - 9;

            scrollbox.width(jQuery(window).width() );

            if(marginLeft > 0)
            scrollbox.closest(".wrap").css("margin-left",(-marginLeft)+"px");
            scrollbox.closest(".wrap").width(jQuery(window).width());
            }
            else if(scrollbox.data("boxed") == "1"){
            scrollbox.closest(".wrap").css("width","100%");
            scrollbox.css("width","100%");
            }
            else if(scrollbox.data("boxed") == "2") {

            scrollbox.closest(".wrap").css("width","100%");
            scrollbox.css("width","100%");
            var indent = jQuery(window).width() - jQuery(".fifteen").width();
            console.log(indent);
            scrollbox.width(jQuery(".fifteen").width() + indent/2 + 9);
            }
            scrollbox.getNiceScroll().resize();
            }             
        </script>
    </body>
</html>